<template>
     <!-- 用户 id-->
    <el-select :disabled='disabledSearch' size="medium" value-key="employees_id" v-loadMore="loadMore" v-if="type === 'id'" v-model="choseObj" :loading="loading" clearable filterable remote :remote-method="remoteMethod" :placeholder="placeholder" @clear="ops.name = ''" @change="onChange" @visible-change="visibleChange">
        <el-option
            v-for="(item) in employeesList"
            :key="item.employees_id"
            :label="item.employee.name"
            :value="item">
        </el-option>
        <el-option class="observer_dom" :label="finish?'没有更多了...':'加载中...'" value=" " disabled  />
    </el-select>
    <!-- 用户 code-->
    <el-select size="medium" v-else-if="type === 'code'" v-model="code" :loading="loading" clearable filterable remote :remote-method="remoteMethod" placeholder="请输入姓名搜索" @change="onChange">
        <el-option
            v-for="item in employeesList"
            :key="'code_' + item.id"
            :label="item.name"
            :value="item.code">
        </el-option>
    </el-select>
    
    
    <!-- 科室 全部科室 -->
    <el-select size="medium" :disabled='disabled' ref="departments" v-else-if="type === 'departments'" v-model="departments_id" :loading="loading" clearable filterable placeholder="请输入科室名称搜索" @change="changeValue">
        <el-option
            v-for="item in cacheDepartments"
            :key="'departments_' + item.id"
            :label="item.name"
            :value="item.id">
        </el-option>
    </el-select>

     <!-- 科室2 条件筛选科室-->
    <el-select size="medium" :disabled='disabled' ref="departments" v-else-if="type === 'departments2'" v-model="departments_id" :loading="loading" clearable filterable placeholder="请输入科室名称搜索" @change="changeValue">
        <el-option
            v-for="item in conditionDepartments"
            :key="'departments_' + item.id"
            :label="item.name"
            :value="item.id">
        </el-option>
    </el-select>

    <!-- 成果 -->
    <el-select size="medium" value-key="id" v-loadMore="loadMore" v-else-if="type === 'chengGuo'" v-model="choseObj" :loading="loading" clearable filterable remote :remote-method="remoteMethod" placeholder="请输入成果名称搜索" @clear="ops.finding_name = ''" @change="onChange" @visible-change="visibleChange">
        <el-option
            v-for="item in employeesList"
            :key="item.id"
            :label="item.finding_name"
            :value="item">
        </el-option>
        <el-option class="observer_dom" :label="finish?'没有更多了...':'加载中...'" value=" " disabled  />
    </el-select>

    <!-- 会议 -->
    <el-select size="medium" v-else-if="type === 'conference'" v-model="ids" :loading="loading" clearable filterable remote :remote-method="searchMethod" placeholder="请输入会议名称搜索" @change="changeValue">
        <el-option
            v-for="item in list"
            :key="'conference_' + item.id"
            :label="item.name"
            :value="item.id">
        </el-option>
    </el-select>
    
    <!-- 角色 -->
    <el-select size="medium" v-else-if="type === 'role'" v-model="ids" :loading="loading" clearable filterable remote :remote-method="searchMethod" placeholder="请输入角色搜索" @change="changeValue">
        <el-option
            v-for="item in list"
            :key="'role_' + item.id"
            :label="item.name"
            :value="item.id">
        </el-option>
    </el-select>
    <!-- 专利 -->
    <el-select size="medium" value-key="id" v-loadMore="loadMore" v-else-if="type === 'patent'" v-model="choseObj" :loading="loading" clearable filterable remote :remote-method="remoteMethod" placeholder="请输入专利名称搜索" @clear="ops.name = ''" @change="onChange" @visible-change="visibleChange">
        <el-option
            v-for="item in employeesList"
            :key="item.id"
            :label="item.name"
            :value="item">
        </el-option>
        <el-option class="observer_dom" :label="finish?'没有更多了...':'加载中...'" value=" " disabled  />
    </el-select>
    <!-- 权限 -->
    <el-select size="medium" v-else-if="type === 'quanxian'" v-model="ids" :loading="loading" clearable filterable remote :remote-method="searchMethod" placeholder="请输入权限名称搜索" @change="changeValue">
        <el-option
            v-for="item in list"
            :key="'quanxian_' + item.id"
            :label="item.name"
            :value="item.id">
        </el-option>
    </el-select>
    <!-- 纵向项目 -->
    <el-select size="medium" v-else-if="type === 'projects'" v-model="ids" :loading="loading" clearable filterable remote :remote-method="searchMethod" placeholder="请输入纵向项目名称搜索" @change="changeValue">
        <el-option
            v-for="item in list"
            :key="'projects_' + item.id"
            :label="item.name"
            :value="item.id">
        </el-option>
    </el-select>
    <!-- 横向项目 -->
    <el-select size="medium" v-else-if="type === 'contracts'" v-model="ids" :loading="loading" clearable filterable remote :remote-method="searchMethod" placeholder="请输入横向项目名称搜索" @change="changeValue">
        <el-option
            v-for="item in list"
            :key="'contracts_' + item.id"
            :label="item.name"
            :value="item.id">
        </el-option>
    </el-select>
    <!-- 国际合作 -->
    <el-select size="medium" v-else-if="type === 'guoJi'" v-model="ids" :loading="loading" clearable filterable remote :remote-method="searchMethod" placeholder="请输入国际合作项目名称搜索" @change="changeValue">
        <el-option
            v-for="item in list"
            :key="'guoJi_'+item.id"
            :label="item.name"
            :value="item.id">
        </el-option>
    </el-select>
    <!-- 学科 -->
    <el-select size="medium" value-key="id" v-loadMore="loadMore" v-else-if="type === 'xueke'" v-model="choseObj" :loading="loading" clearable filterable remote :remote-method="remoteMethod" placeholder="请输入学科名称搜索" @clear="ops.name = ''" @change="onChange" @visible-change="visibleChange">
        <el-option
            v-for="item in employeesList"
            :key="item.id"
            :label="item.name"
            :value="item">
        </el-option>
        <el-option class="observer_dom" :label="finish?'没有更多了...':'加载中...'" value=" " disabled  />
    </el-select>
</template>

<script>
import {
    Apiemployees,
    Apiroles,
    Apiresearchfindings,
    Apipatentinfos,
    Apipermissions,
    Apiprojects,
    Apicontracts,
    ApiInternationalcontracts,
    Apidisciplines} from '@/api'
import {mapState} from 'vuex'
import {adminShow} from '@/utils'
export default {
    name: 'inputSearch',
    props:{
        type:{
            default: 'id'
        },
        placeholder:{
            default: '请输入人员姓名搜索'
        },
        info:{
            default: false,
            type: Boolean
        },
        middleList:{
            default:()=>([])
        },
        departmentsId:{
            default:null,
        },
        disabledSearch:{ //禁用搜索
            default: false,   
            type: Boolean
        },
        p_disabled:{ //科室禁用
            default: true,   
            type: Boolean
        },
        options:{
            default:()=>({})
        }
    },
    computed:{
    ...mapState(['cacheDepartments']),
    conditionDepartments(){
        return this.cacheDepartments.filter(ele => ele.discipline_id === this.options.discipline_id)  
    }
  },
    data(){
        return{
            employeesList: [],
            choseObj: null,
            code: null,
            loading: false,

            departments_id: this.departmentsId,
            
            apiInfo:{
                id: Apiemployees,
                code: Apiemployees,
                role: Apiroles,  //角色
                chengGuo: Apiresearchfindings, //科研-->成果
                patent: Apipatentinfos, //专利
                quanxian: Apipermissions,   //权限
                projects: Apiprojects,  //纵向项目
                contracts: Apicontracts,  //横向项目
                guoJi: ApiInternationalcontracts,  //国际合作
                xueke: Apidisciplines
            },

            nameInfo:{
                chengGuo: 'finding_name'
            },
            ids:null,
            list: [],
            disabled: false,
            
            ops:{
                page: 1,
                perPage: 20,
                // total: null,
                // name:"",
                // finding_name:"",
            },

            loadMoreLoading:false,
            finish:true,
            identifier: false,
            otherList: [],
        }
    },
    mounted(){
        if((this.type === 'departments' || this.type === 'departments2') && !adminShow() && this.p_disabled){
            this.disabled = true
            this.departments_id = this.$store.state.userInfo.department_id
        }
    },
    watch:{
        middleList:{
            handler(value){
                if(this.type === 'id' || this.type === 'code'){

                }else{ 
                    this.ids = value.length > 0 ? value[0].id : null
                    this.list = value
                }
                this.choseObj = value.length > 0 ? value[0] : null
                this.employeesList = value
                this.otherList = value
            },
            deep: true,
            immediate: true
        }
    },
    methods:{
        clear(){
            this.employeesList = []
            this.choseObj = null
            this.ids = null
            this.list = []
            if(!this.disabled) this.departments_id = null
        },

        searchMethod(name){
            name = name.trim()
            const fn = this.apiInfo[this.type]
            if(!name) {
                this.list= []
                return
            }
            this.loading = true
            let options = {[this.nameInfo[this.type] || 'name']:name, allPage:2,...this.options}
            fn(options).then(({data}) => {
                this.list = data
            }).finally(()=>{
                this.loading = false
            })
        },
        changeValue(id){
            this.$emit('onChange',id)
        },

        visibleChange(flag){
            if(flag) {
                this.identifier = true 
                this.remoteMethod("")
            }
            else{
               if(this.identifier){
                   this.employeesList = this.otherList
                   this.finish = true
               }
            }
        },

        remoteMethod(name){
            this.ops[this.nameInfo[this.type] || "name"] = name.trim()
            this.ops.page = 1
            this.loading = true 
            this.getList('loading')
        },
        
        getList(method){
            const options = {review_status:1,...this.options,...this.ops}
            const api = this.apiInfo[this.type]
            api(options).then(({data,page}) => {
                this.employeesList = this.ops.page === 1 ? data : this.employeesList.concat(data)
                this.finish = this.employeesList.length >= page.total
            }).finally(()=>{
                this[method] = false
            })
        },

        loadMore(){
            this.ops.page ++ 
            this.loadMoreLoading = true
            this.getList('loadMoreLoading')
        },

        onChange(item){
            this.identifier = false
            this.otherList = item ? [item] : []
            if(this.type === "id"){
                if(this.info){
                    item ||= {}
                    const obj = {...item,name:item.employee?.name ?? "",id:item.employees_id}
                    this.$emit('onChange',obj)
                }else{
                    this.$emit('onChange',item?.employees_id ?? null)
                }
            }else{
                if(this.info){
                    this.$emit('onChange',item || {})
                }else{
                    this.$emit('onChange',item?.id ?? null)
                }
            }
            
        },
    }
}
</script>